@charset 'UTF-8';
@import './common/_functions.scss';
@import './common/_variables.scss';

header
{
    font-size: initial;

    height: px2rem(85);
    padding: px2rem(15) 0 px2rem(15) px2rem(25);

    text-align: center;

    background-color: $_fafbfc;
    .search
    {
        font-size: px2rem(26);

        width: px2rem(610);
        height: px2rem(55);
        padding: px2rem(10) px2rem(15);

        border: 1px solid $_ccc;
        border-radius: px2rem(5);
        background-color: $_fff;
    }
    .search_btn
    {
        float: right;

        padding-right: px2rem(25);
    }
}
nav
{
    height: px2rem(90);
    padding: px2rem(30);

    border-width: 1px 0;
    border-style: solid;
    border-color: $_ccc;
    .good_nav
    {
        display: flex;
    }
}
.good_nav
{
    li
    {
        font-size: px2rem(30);
        line-height: px2rem(30);

        position: relative;

        height: px2rem(30);

        text-align: center;

        color: $_666;

        flex: 1;
        i
        {
            position: absolute;
        }
        .order_up
        {
            top: px2rem(3);
            right: px2rem(20);

            width: 0;
            height: 0;

            color: $_ccc;
            border-right: px2rem(5) solid transparent;
            border-bottom: px2rem(10) solid currentColor;
            border-left: px2rem(5) solid transparent;
        }
        .order_down
        {
            top: px2rem(18);
            right: px2rem(20);

            width: 0;
            height: 0;

            color: $_ccc;
            border-top: px2rem(10) solid currentColor;
            border-right: px2rem(5) solid transparent;
            border-left: px2rem(5) solid transparent;
        }
    }
    .current
    {
        color: $_03a9f4;
        .order_up
        {
            color: $_03a9f4;
        }
    }
    .down
    {
        .order_up
        {
            color: $_ccc;
        }
        .order_down
        {
            color: $_03a9f4;
        }
    }
}

.good_list
{
    font-size: initial;

    padding-bottom: px2rem(25);

    counter-reset: sales;

    background-color: $_fff;
    .good_item
    {
        display: flex;

        padding: px2rem(25) 0 0 px2rem(30);
    }
}
.good_item
{
    > div
    {
        padding-bottom: px2rem(30);
    }
    .good_img
    {
        position: relative;

        margin-right: px2rem(30);
        @at-root
        {
            .good_promote
            {
                font-size: px2rem(24);
                line-height: px2rem(30);

                position: absolute;

                padding-left: px2rem(5);

                opacity: 0;
                color: #fff;
                background-color: $_ee898d;
                &:after
                {
                    font-size: 0;

                    position: absolute;

                    width: 0;
                    height: 0;

                    content: '';

                    color: $_ee898d;
                    border-top: px2rem(15) solid currentColor;
                    border-right: px2rem(15) solid transparent;
                    border-bottom: px2rem(14.6) solid currentColor;
                    border-left: px2rem(15) solid currentColor;
                    background-color: transparent;
                }
            }
            .good_count
            {
                position: absolute;

                padding: px2rem(10) 0 0 px2rem(10);

                counter-increment: sales;
                &:before
                {
                    font-size: px2rem(40);
                    line-height: px2rem(38);

                    display: inline-block;

                    width: px2rem(38);
                    height: px2rem(38);

                    content: counter(sales);
                    text-align: center;

                    color: $_fff;
                    border-radius: 50%;
                    background-color: $_0093ff;
                }
                &:after{
                    font-size: 0;

                    position: absolute;

                    width: 0;
                    height: 0;
                    top: px2rem(46);
                    left: px2rem(23);

                    content: '';

                    border-top: px2rem(6) solid $_0093ff;
                    border-right: px2rem(6) solid transparent;
                    border-bottom: px2rem(6) solid transparent;
                    border-left: px2rem(6) solid transparent;
                    background-color: transparent;
                }
            }
        }
        .jd_logo
        {
            font-size: px2rem(24);
            line-height: px2rem(30);

            position: absolute;
            top: 0;
            left: 0;

            width: px2rem(30);
            height: px2rem(30);

            text-align: center;

            color: #fff;
            background-color: $_e51c23;
        }
        img
        {
            width: px2rem(185);
            height: px2rem(185);
        }
    }
    .good_info
    {
        padding-right: px2rem(50);

        border-bottom: 1px solid $_ccc;

        flex: 1;
    }
}
.good_info
{
    .good_title
    {
        font-size: px2rem(28);
        font-weight: normal;

        overflow: hidden;

        height: px2rem(140);

        color: $_333;
    }
}
.sale_price
{
    font-size: px2rem(24);

    color: $_333;
    .good_sum
    {
        > em
        {
            font-size: px2rem(36);

            color: $_e51c23;
        }
        i
        {
            font-size: px2rem(36);

            margin: 0 px2rem(10);

            color: $_666;
        }
    }
    .market_price
    {
        font-size: px2rem(24);
        line-height: px2rem(55);

        float: right;

        text-decoration: line-through;

        color: $_999;
    }
}

/* 图标 */
.good_list_icon
{
    display: inline-block;

    background-image: url('/resources/img/good_list.png');
    background-repeat: no-repeat;
    background-size: .4rem .98667rem;
}
.good_l
{
    float: left;

    width: .26667rem;
    height: .45333rem;
    margin-top: px2rem(13);

    background-position: 0 0;
}
.good_s
{
    width: .4rem;
    height: .4rem;
    margin-top: px2rem(13);

    background-position: 0 -.58667rem;
}
